<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<hello-world @btn1='btn'></hello-world>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			Vue.component('HelloWorld', {
				data: function() {
					return {
						msg: '己所不欲勿施于人'
					}
				},
				template: `
				<h1>
				  {{msg}}
					<button @click='change'>点击试试</button>
				</h1>
				`,
				methods: {
					change() {
						this.$emit('btn1', this.msg)
						
						//这里是传入多个参数的情况，如果操作同一个方法，还需要使用type进行区分
						//在父组件需要判断类型进行操作if(val.type=='change')
						// this.$emit('btn1', {
						// 	this.msg,
						// 	1,
						// 	type: 'change'
						// })
						
						//如何获取输入框中的值：使用参数$event,在方法中由event.target.value得到输入框中的值
						/*change(id, event) {
							this.$emit('change1', {
								id: id
								num: event.target.value
							})
						}*/
						
						
					}
				}
			})
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "请输入"
				},
				methods: {
					btn(num) {
						alert('我是父组件方法' + '======>' + num)
					}
				}
			})
		</script>
	</body>
</html>

